<script>
  import $ from '../dfish.js'
  import {
    h
  } from 'vue'
  import FormBase from './FormBase.vue'

  export default {
    name: 'w-form',
    mixins: [FormBase],
    props: ['vertical'],
    methods: {
      html_input() {
        return [
          this.html_input_hidden(),
          this.$slots.default && this.$slots.default()
        ]
      },
    },
    computed: {
      validHooks() {
        return {
          ...this.pubValidHooks,
          required: (v, r, q) => {
            if (r && (!v || v === '[]' || v === '{}')) {
              return this.formErr(q)
            }
          }
        }
      },
      input_value() {
        let mv = this.x.modelValue
        return mv == null ? '' : typeof mv === 'object' ? JSON.stringify(mv) : mv
      },
      html_class() {
        return [{
          'z-vertical': this.x.vertical,
        }]
      },
      html_style() {
        return {
          '--w-form-gap': $.unitSize(this.x.gap)
        }
      },
      main_prop() {
        return this.name && {
          onclick: e => this.warn(false)
        }
      }
    },
  }
</script>
